import { useKeyPress } from "ahooks"
import { useDispatch } from "react-redux"
import { copySelectedComponent, pasteCopiedComponent, removeSelectedComponent, selectNextComponent, selectPrevComponent } from "../store/componentsReducer"

// 模块导入中重命名：必须使用 as
import { ActionCreators as UndoActionCreators } from "redux-undo"

function isActiveElementValid() {
    // 只要 聚焦的不是文本框，其他标签的结果都是body
    const activeElem = document.activeElement

    // 没有增加dnd-kit之前
    // 由于添加了拖拽效果，添加了额外的div及样式效果，导致出现了bug，点击外部以外的地方之前是body，现在是div
    // if (activeElem === document.body) return true // 光标没有 focus 到 input

    // 增加dnd-kit之后
    if (activeElem === document.body) return true // 命中了组件并且没有命中输入框
    if (activeElem?.matches('div[role="button"]')) return true // 添加了dnd-kit，选中的不是input组件document.activeElement结果就变成了div
    return false
}

function useBindCanvasKeyPress() {
    const dispatch = useDispatch()

    // 删除组件快捷键 （这里只绑定delete，不绑定退格键了）
    useKeyPress("delete", () => {
        if (!isActiveElementValid()) return
        dispatch(removeSelectedComponent())
    })

    // 复制组件快捷键

    useKeyPress(["ctrl.c", "meta.c"], () => {
        if (!isActiveElementValid()) return
        dispatch(copySelectedComponent())
    })

    // 粘贴组件快捷键
    useKeyPress(["ctrl.v", "meta.v"], () => {
        if (!isActiveElementValid()) return
        dispatch(pasteCopiedComponent())
    })

    // 选中上一个
    useKeyPress(["uparrow"], () => {
        if (!isActiveElementValid()) return
        dispatch(selectPrevComponent())
    })

    // 选中下一个
    useKeyPress("downarrow", () => {
        if (!isActiveElementValid()) return
        dispatch(selectNextComponent())
    })

    // 撤销
    useKeyPress(
        ["ctrl.z", "meta.z"],
        () => {
            if (!isActiveElementValid()) return
            dispatch(UndoActionCreators.undo())
        },
        {
            exactMatch: true // 严格匹配，必须是只按了 ctrl + z，否则ctrl + shift + z也符合
        }
    )
    // 重做
    useKeyPress(
        ["ctrl.shift.z", "meta.shift.z"],
        () => {
            if (!isActiveElementValid()) return
            dispatch(UndoActionCreators.redo())
        },
        {
            exactMatch: true // 严格匹配，必须是只按了 ctrl + shift + z
        }
    )
}

export default useBindCanvasKeyPress
